<script setup>

import {onMounted, ref} from "vue";
import * as ace from 'ace-builds'
import 'ace-builds/src-noconflict/mode-sql'
import 'ace-builds/src-noconflict/theme-github_light_default'
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/snippets/sql';

const props = defineProps({
  metadata: Object
});

function onDidChangeCursorSelection(data,va) {
  console.log("onDidChangeCursorSelection",data,va)
}

const editor_id = ref("editor_" + new Date().getTime())

function init_monaco_editor () {
  const editor  = ace.edit(editor_id.value,props.metadata.editor.options);
  editor.setTheme("ace/theme/github_light_default");
  editor.session.setMode("ace/mode/sql");
  props.metadata.editor.target = editor
  editor.setValue("select * from sida.role")
}

onMounted(()=>{
  init_monaco_editor();
})
</script>
<template>
  <el-container class="queried-content">
    <el-main class="queried-main">
      <div :id="editor_id" class="queried-editor-content" ref="sql_monaco_editor"></div>
    </el-main>
  </el-container>
</template>

<style scoped>
.queried-editor-content{
  height: 100%;
  width: 100%;
}
</style>